<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width" charset="UTF-8"/>
    <title>学区地图</title>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link rel="stylesheet" th:href="@{/ajax/libs/weui/css/weui.css}">
    <link rel="stylesheet" th:href="@{/css/gridService/weuix.css}">
    <link rel="stylesheet" th:href="@{/ajax/libs/weui/css/jquery-weui.css}">

    <script th:src="@{/js/jquery.min.js}"></script>

    <!--引用百度地图API-->
    <script type="text/javascript"
            src="http://api.map.baidu.com/getscript?v=2.0&ak=nMgIG8pC7YKcTysHAyoyx71oy9mMyH6h"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .BMap_bubble_title {
            color:white;
            font-size:13px;
            font-weight:bold;
            text-align:left;
            padding-left:5px;
            padding-top:5px;
            border-bottom:1px solid gray;
            background-color:#0066b3;
        }
        /* 消息内容 */
        .BMap_bubble_content {
            background-color:white;
            /*padding: 10px;*/
            border-radius: 20px;
        }
        /* 内容 */
        .BMap_pop div:nth-child(9) {
            top:60px !important;
            border-radius:7px;
            height: auto;!important;
        }
        /* 内容 */
        .BMap_pop :nth-child(10) {
            display: none;!important;
        }
        /* 左上角删除按键 */
        .BMap_pop img {
            top:43px !important;
            left:215px !important;
            /*display: none;*/
        }
        .BMap_top {
            display:none;
        }
        .BMap_bottom {
            display:none;
        }
        .BMap_center {
            display:none;
        }
        /* 隐藏边角 */
        .BMap_pop div:nth-child(1) div {
            display:none;
        }
        .BMap_pop div:nth-child(3) {
            display:none;
        }
        .BMap_pop div:nth-child(5) {
            display:none;
        }
        .BMap_pop div:nth-child(7) {
            display:none;
        }


        /*遮罩样式*/
        .shade{
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            top: 0;
            margin: 0;
            padding: 0;
            background-color: rgba(0,0,0,0.3);
            z-index: 99;
            display: none;
        }

        /*学校详情样式*/
        .school_detail_container{
            /*width: 100%;*/
            z-index: 100;
            height: 80%;
            position: absolute;
            top: 0;
            display: none;
            padding: 10%;

        }
        .school_detail{
            width: 100%;
            max-height: 100%;
            background-color: #ffffff;
            border-radius: 15px;
            overflow: auto;

        }

        /*学校详情图片*/
        .school_detail_img{
            width: 100%;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }

        .school_detail_title{
            color: #2d8fe8;
            font-family: cursive;
            font-size: 18px;
            margin:0 0 5px 5px;
            padding:0.2em 0
        }

        .school_detail_content{
            font-family: cursive;
            font-size: 18px;
            margin:0 0 5px 5px;
            padding:0.2em 0
        }
        .school_detail_close_small{
            text-align: right;
            position: relative;
            top: 3px;
            right: 3px;
            height: 0;
        }


        * {
            font-size: 14px;
        }

        .weui-cells {
            margin-top: 0px !important;
        }

        .weui-search-bar {
            background-color: white !important;
        }

        .weui-search-bar:after {
            border-bottom: 0px !important;
        }

        .weui-cells:after {
            border-bottom: 0px !important;
        }

        .weui-cells:before {
            border-top: 0px !important;
        }

        .weui-cell_select-before .weui-cell__hd:before {
            border-width: 0 2px 2px 0 !important;
            top: 45% !important;
        }

        .weui-cell_select-before .weui-cell__hd:after {
            border-right: 0px !important;
            margin-top: -7px !important;
        }

        .search-input {
            border: 1px solid #F0F0F3 !important;
        }

        .weui-cell__hd {
            width: 50% !important;
        }

        .weui-cell_select-before .weui-select {
            width: 100% !important;
        }

        .imgTip{
            border: 1px solid #259CC6;
            border-radius: 100px;
            padding: 2px 15px;
            background-color: white;
            position: relative;
            left: -22px;
            color: #259CC6;
        }
    </style>
</head>
<body>

<div style="position: absolute; top: 0; width: 100%; z-index: 99;box-shadow: 0 2px 3px -1px #666666;">
    <div class="weui-search-bar">
        <input type="search" class="search-input" id='context' oninput="searchSchoolData(this);" placeholder='输入网点名、地点' style="border-radius: 5px;"/>
        <!--<button  class="weui-btn weui-btn_mini weui-btn_default" onclick="searchMap();"><i class="icon icon-4"></i></button>-->
  <!--      <div style="width: 60px; text-align: center; display: none" onclick="changeView();">
            <div style="height: 30px;">
                <img th:src="@{/img/gridService/change.png}" style="height: 30px;"/>
            </div>
            <div>
                <p style="font-size: 10px; clear: both; color: #2484E8;">切换列表</p>
            </div>
        </div>-->
    </div>

    <div class="weui-cells">
        <div class="weui-cell weui-cell_select weui-cell_select-before">
            <div class="weui-cell__hd" style="border-right: 1px solid #F2F2F4;">
                <select class="weui-select __web-inspector-hide-shortcut__" name="distance" id="distance">
                    <option value="3000" selected="selected">附近</option>
                    <option value="1000">1kM</option>
                    <option value="3000">3KM</option>
                    <option value="5000">5KM</option>
                    <option value="10000">10KM</option>
                    <option value="30000">30KM</option>
                    <option value="50000">50KM</option>
                    <option value="100000">100KM</option>
                </select>
            </div>

            <div class="weui-cell__hd">
                <select class="weui-select __web-inspector-hide-shortcut__" name="schoolType" id="schoolType">
                    <option value="" selected="selected">学段</option>
                    <option value="1">幼儿园</option>
                    <option value="2">小学</option>
                    <option value="3">中学</option>
                    <option value="4">高中</option>
                    <option value="5">大学</option>
                </select>
            </div>
        </div>
    </div>



</div>



<!--todo 这里加入地图-->
<!--百度地图容器-->
<div id="map" style="height: 100%"></div>

<!--遮罩-->
<div class="shade"></div>


<!--学校详情弹框-->
<div class="school_detail_container">
    <div id="school_detail" class="school_detail"></div>
</div>

</body>


<script th:inline="javascript">
    var ctx = /*[[@{/}]]*/ '';
</script>

<script th:src="@{/ajax/libs/weui/js/jquery-weui.js}"></script>

<script th:inline="javascript">
    var markerData = /*[[${markerData}]]*/ '';//获取后台的所有点位数据
    var map; //全局地图对象
    var w; //设备宽度
    var h; //设备高度

    var currentPoint;

    var content = '' ;//搜索内容

    var distance = 1000;//距离（默认1000米）

    var schoolType = '';//学段类别（默认所有学段）

    /** 主页覆盖物*/
    var homeOverlay = [];

    /** 二级详情覆盖物*/
    var detailOverlay = [];

    $(function () {
        initMap();
    });


    //创建和初始化地图函数：
    function initMap() {
        //设备宽高
        w = document.documentElement.clientWidth;
        h = document.documentElement.clientHeight;
        $("#map").css({"width": w});

        createMap();//创建地图，并添加标注点位
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件

        getGeolocation();
    }


    /**
     * 创建地图实例 ，并添加标注点位
     *
     */
    function createMap() {
        map = new BMap.Map("map");
        var point = new BMap.Point(118.102422, 32.124652);
        map.centerAndZoom(point, 13);
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);               // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

        addMarkerPoint(markerData);//添加标注点位
    }

    function setMapEvent() {
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }

    //向地图添加控件
    function addMapControl() {
        var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
        var navControl = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(navControl);
    }



    /**
     * 添加标注点位
     *
     */
    function addMarkerPoint(data) {
        for (let i = 0, j = data.length; i < j; i++) {
            let pt = new BMap.Point(data[i].schoolLng, data[i].schoolLat);
            let myIcon = new BMap.Icon(ctx+"img/school-district/school-type-"+data[i].schoolType+".png", new BMap.Size(24, 24));
            let marker = new BMap.Marker(pt, {
                icon: myIcon
            });

            homeOverlay.push(marker);

            // 创建标注
            map.addOverlay(marker);


            /**
             * 标注被点击触发事件
             */
            marker.addEventListener("click", function(){
                showSchoolDetail(data[i]);
            });

        }
    }

    /**
     * 根据查询的学校详情信息，渲染详情弹框
     */
    function showSchoolDetail(data) {

        //清除详情覆盖物
        clearOverlay(detailOverlay);


        //显示遮罩
        $(".shade").show();
        //显示学校详情弹框
        $('#school_detail').animate({ scrollTop: 0 }, 100);


        let html = "";

        /*右上角关闭按钮*/
        // html += "<div class='school_detail_close_small'><img onclick='closeSchoolDetail()' src='"+ctx+"img/school-district/icon-close-small.png'/></div>";

        /*图片*/
        html += "<img class='school_detail_img' style='width: 100%' id='imgDemo' src='"+ctx+"img/school-district/江浦实验小学.jpg"+"'/>";

        /*学校名称*/
        html +="<h4 class='school_detail_title'>学校名称：</h4>";
        html +="<p class='school_detail_content'>"+data.schoolName+"</p>";

        /*学校介绍*/
        html +="<h4 class='school_detail_title'>学校介绍：</h4>";
        html +="<p class='school_detail_content'>"+"暂无介绍"+"</p>";


        /*联系方式*/
        html +="<h4 class='school_detail_title'>联系方式：</h4>";
        let tel = (data.advisoryPhone == null || data.advisoryPhone == '' || data.advisoryPhone == null) ? "暂无联系方式" : data.advisoryPhone;
        html += "<p class='school_detail_content'>"+tel+"</p>";

        /*联系地址*/
        html +="<h4 class='school_detail_title'>联系地址：</h4>";
        html += "<p class='school_detail_content'>"+data.schoolAddress+"</p>";


        /*施教范围*/
        html +="<h4 class='school_detail_title'>施教范围：</h4>";
        html += "<p class='school_detail_content'>"+(data.teachArea || "暂无数据")+"</p>";

        /*下方关闭按钮*/
        html += "<div style='text-align: center'><img onclick='closeSchoolDetail()' style='width: 48px' src='"+ctx+"img/school-district/icon-close-big.png'/></div>";



        $(".school_detail").html("").html(html);

        //学校中心点
        let pointObj = new BMap.Point(data.schoolLng, data.schoolLat);

        let arr = JSON.parse(data.teachAreaPoint) || [];


        /** 添加圆和标注区域点*/
        // circle = new BMap.Circle(pointObj ,1000,{fillColor:"#4C9CF5", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3}); //创建圆
        let markerArea;
        for (let i=0;i<arr.length;i++){
            markerArea = new BMap.Marker(new BMap.Point(arr[i].lng, arr[i].lat)); // 创建点
            let offset = -(arr[i].name.length * 5);
            let label = new BMap.Label(arr[i].name,{offset:new BMap.Size(offset,25)});
            markerArea.setLabel(label);
            map.addOverlay(markerArea);
            detailOverlay.push(markerArea);

        }


        // map.addOverlay(circle);//添加圆形


        /** 添加多边形*/
        let rectangle = JSON.parse(data.teachAreaOuterLine) || [];
        let pointArr = [];
        for (let i =0;i<rectangle.length;i++){
            let linePoint = new BMap.Point(rectangle[i].lng,rectangle[i].lat);
            pointArr.push(linePoint);
            detailOverlay.push(linePoint);
        }
        /**
         * 多边形参数：
         * fillColor：填充颜色。当参数为空时，折线覆盖物将没有填充效果
         * strokeColor：边线颜色
         * strokeWeight：边线的宽度，以像素为单位
         * strokeOpacity:边线透明度，取值范围0 - 1
         * fillOpacity： 填充的透明度，取值范围0 - 1
         * strokeStyle：边线的样式，solid或dashed
         * enableEditing：是否启用线编辑，默认为false
         *
         */
        let polygon = new BMap.Polygon(pointArr, {
                fillColor:"#4C9CF5",
                strokeColor:"red",
                strokeWeight:2,
                strokeOpacity:0.8,
                fillOpacity:0.2,
                strokeStyle:"dashed"});
        map.addOverlay(polygon);

        detailOverlay.push(polygon);

        //显示弹框
        $(".school_detail_container").show();


        //将点击的标注点在地图上置中
        map.panTo(pointObj);
        window.setTimeout(function () {
            map.setZoom(16);//1秒后放大地图
        },1000)

    }


    /**
     * 清除覆盖物
     */
    function clearOverlay(overlayArr) {

        for(let i =0;i<overlayArr.length;i++){
            map.removeOverlay(overlayArr[i]);
        }

    }


    /**
     * 关闭学校详情展示
     *
     */
    function closeSchoolDetail() {
        //显示弹框
        $(".school_detail_container").hide();
        //显示遮罩
        $(".shade").hide();

    }


    /**
     * 获取定位
     *
     */
    function getGeolocation() {
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                currentPoint = r.point;
                //todo
                // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
            } else {
                alert('failed' + this.getStatus());
            }
        }, {enableHighAccuracy: true})
    }



    /**
     * 改变学段触发事件
     */
    $("#schoolType").on("change",function () {
        schoolType = $(this).children("option:selected").val();
        searchSchoolData();
    });

    /**
     * 改变距离触发事件
     */
    $("#distance").on("change",function () {
        distance = $(this).children("option:selected").val();
        searchSchoolData();
    });

    /**
     * 搜索框内容改变触发事件
     */
    $("#context").on("change",function () {
        content = this.val();
        searchSchoolData();
    });




    /**
     * 搜索数据
     *
     */
    function searchSchoolData() {
        if (markerData instanceof Array){
            $.showLoading("获取数据");
            window.setTimeout(function () {
                let resultMarker = markerData.filter(s =>(schoolType == '' ? true : s.schoolType == schoolType) && getDistance(new BMap.Point(currentPoint.lng,currentPoint.lat),new BMap.Point(s.schoolLng,s.schoolLat)) <= Number.parseInt(distance) && (content == '' ? true : s.schoolName.indexOf(content)!=-1));
                clearOverlay(homeOverlay);
                addMarkerPoint(resultMarker);
                $.hideLoading();
            },100)
        }else {
            alert("地图加载失败！");
        }


    }


    /**
     *  获取两点距离,保留小数点后两位(单位：米)
     */
    function getDistance(pointA,pointB) {
         return map.getDistance(pointA,pointB).toFixed(2);
    }

</script>

<script type="text/javascript">


</script>

</html>
